<template>
  <div class="auth-background">
    <div class="container">
      <div class="auth-container">
        <div class="auth-header">
          <h2>{{ isLogin ? "登录" : "注册" }}</h2>
        </div>
        <el-form :model="form" :rules="rules" ref="authForm" label-width="0">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
          </el-form-item>
          <el-form-item v-if="!isLogin" prop="confirmPassword">
            <el-input
                v-model="form.confirmPassword"
                placeholder="确认密码"
                type="password"
            ></el-input>
          </el-form-item>
          <el-button
              type="success"
              @click="handleSubmit"
              :loading="loading"
              class="submit-button"
          >
            {{ isLogin ? "登录" : "注册" }}
          </el-button>
        </el-form>
        <div class="toggle-link" @click="toggleAuth">
          {{ isLogin ? "没有账号？注册一个" : "已有账号？去登录" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      isLogin: true, // 控制登录/注册界面切换
      loading: false, // 按钮加载状态
      form: {
        username: "",
        password: "",
        confirmPassword: "",
      },
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "密码长度至少为6位", trigger: "blur"},
        ],
        confirmPassword: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次密码输入不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    toggleAuth() {
      this.isLogin = !this.isLogin;
      this.resetForm();
    },
    resetForm() {
      this.$refs.authForm.resetFields();
      this.form.username = "";
      this.form.password = "";
      this.form.confirmPassword = "";
    },
    handleSubmit() {
      this.$refs.authForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            if (this.isLogin) {
              this.$api.user.login(this.form).then(res => {
                if (res.code == 200) {
                  // 使用vuex存token
                  this.$store.commit('SET_TOKEN', res.data)
                  // 发送用户请求
                  this.$store.dispatch("getUserInfo")
                  this.$router.push({path: "/"})
                }
              })

            } else {
             this.$api.user.register(this.form).then(res=>{
               if (res.code == 200){
                 this.$message.success("注册成功！")
               }
             })
            }
            this.resetForm();
          }, 1000);
        } else {
          this.$message.error("验证失败，请检查输入！");
        }
      });
    },
  },
};
</script>

<style scoped>
.auth-background {
  background-image: url('https://order-ly.oss-cn-guangzhou.aliyuncs.com/order-ly/2024-11-24/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* 确保背景图片铺满整个视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.auth-container {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  padding: 30px;
  position: relative;
  z-index: 1;
}

.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-header h2 {
  color: #3fa95f;
  font-weight: bold;
}

.el-input {
  margin-bottom: 20px;
}

.submit-button {
  width: 100%;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.02);
  }
}

.toggle-link {
  text-align: center;
  margin-top: 20px;
  color: #3fa95f;
  cursor: pointer;
  transition: color 0.3s ease;
}

.toggle-link:hover {
  text-decoration: underline;
  color: #27ae60;
}
</style>



